<template>
  <basic-container>
    <avue-form 
      v-model="form"
      :option="option"
      @tab-click="handleTabClick"
      @submit="handleSubmit"
    ></avue-form>
  </basic-container>
</template>

<script>
  import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user";
  import {uploadAPI} from '@/api/common'
  import {password_verification} from "@/util/util";
  import func from "@/util/func";
  
  export default {
    data() {
      return {
        index: 1,
        form: {},
      };
    },
    created() {
      this.handleWitch();
    },
    computed:{
      infoColumn(){
        return [
          {
            label: '头像',
            type: 'upload',
            prop: 'avatar',
            listType: 'picture-img',
            propsHttp: {
              res: 'data',
            },
            action: uploadAPI,
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            span: 12,
            row: true,
          },
          {
            label: '用户名',
            row: true,
            prop: 'name'
          },
          {
            label: '手机号',
            row: true,
            prop: 'phone'
          }
        ]
      },
      passwordColumn(){
        return [
          {
            label: '原密码',
            row: true,
            type: 'password',
            prop: 'oldPassword'
          }, 
          {
            label: '新密码',
            row: true,
            type: 'password',
            prop: 'newPassword',
            rules: [{required: true,message:'请输入密码'},{validator:password_verification, trigger: 'blur'}]
          },
          {
            label: '确认密码',
            row: true,
            type: 'password',
            prop: 'newPassword1',
            rules: [{required: true,message:'请输入密码'},{validator: this.validatePass2, trigger: 'blur'}]
          },
        ]
      },
      option(){
        return {
          tabs: true,
          tabsActive: this.index,
          group: [
            {
              label: '个人信息',
              prop: 'info',
              column: this.index==1 ? this.infoColumn : []
            },
            {
              label: '修改密码',
              prop: 'password',
              column: this.index==2 ?this.passwordColumn : []
            }
          ],
        }
      }
    },
    methods: {
      validatePass2(rule, value, callback){
        if (value !== this.form.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      },
      handleSubmit(form, done) {
        if (this.index === 1) {
          updateInfo(form).then(() => {
            this.$message({
              type: "success",
              message: "修改信息成功!"
            });
            done();
          }).catch(()=>{
            done();
          })
        } else {
          updatePassword(form.oldPassword, form.newPassword, form.newPassword1).then(() => {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            done();
          }).catch(()=>{
            done();
          })
        }
      },
      async handleWitch() {
        if (this.index === 1) {
          const { data } = await getUserInfo()
          this.form = {
            id: data.id,
            name: data.name,
            phone: data.phone,
            email: data.email,
          }
        }
      },
      handleTabClick(tabs) {
        this.index = func.toInt(tabs.name);
        this.handleWitch();
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
